<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="../style/css/bootstrap.min.css">
  <link rel="stylesheet" href="../style/css/common.css">
</head>

<body>
  <div class="container">
    <ul class="nav nav-tabs mb20">
      <li><a href="index.html">检测人脸</a></li>
      <li><a href="compareCode.html">相似度比较</a></li>
      <li><a href="centerFace.html">检测最中心人脸</a></li>
      <li class="active"><a href="addFeature.html">添加特征码</a></li>
      <li><a href="../client/index.html" target="_blank">切换版本</a></li>
      <li><a href="../index.html">返回首页</a></li>
    </ul>
    <div class="div-upload">
      <div class="div-btn">
        <button type="button" class="btn btn-default btn-blue">点击上传</button>
        <button type="button" class="btn btn-default btn-blue submit">点击添加</button>
      </div>
      <div class="tips">
        <p>提取特征码调用的接口：/FaceApi/detectAndGetCodeInfo</p>
        <p>请求方式：post</p>
        <p>接口参数：data: JSON.stringify({faceNum: 0, imgData: imgCommon})</p>
        <p>参数解析：imgCommon: 照片的base64字符串，faceNum：默认值为0；使用JSON.stringify()，将参数内容转为json字符串发送给服务端</p>
      </div>
      <div class="tips">
        <p>添加到内存条调用的接口：/FeatureSe/addFeatureToFse</p>
        <p>请求方式：post</p>
        <p>接口参数：data: JSON.stringify({"feature": codeArr[i].code,"featureId": null,"imgMD5": null}),</p>
        <p>参数解析：feature: 照片特征码数组，featureId：null，imgMD5：null；使用JSON.stringify()，将参数内容转为json字符串发送给服务端</p>
      </div>
      <input type="file" onchange="previewImage(this)" id="photoimg" class="btn-file" />
      <div class="preview prevPic" id="preview"><img src="" alt="" /></div>
      <div class="picStr" id="code1"></div>
    </div>
    <!-- 提示语 -->
    <div class="box">
      <div class="msg">提示成功</div>
    </div>
  </div>
  <script src="../style/js/jquery.min.js"></script>
  <script src="js/common.js"></script>
  <script src="js/preview.js"></script>
  <script>
    // 获取特征码
    // 定义一个空数组保存特征码
    codeArr = [];
    function getCode(imgCommon, prevDiv) {
      $.ajax({
        type: "post",
        url: req_prefix + '/FaceApi/detectAndGetCodeInfo',
        xhrFields: {
          withCredentials: true
        },
        crossDomain: true,
        contentType: "application/json",
        data: JSON.stringify({
          faceNum: 0,
          imgData: imgCommon
        }),
        success: function (data) {
          if(data.success){
            // 获取特征码
            codeArr = data.result
          }else{
            $('.box').show().delay(3000).fadeOut();
            $('.box').find('.msg').text(data.errorMessage);
            prevDiv.innerHTML = '<img src="" alt="" />';
          }
        },
        error: function (error) {
          $('.box').show().delay(3000).fadeOut();
          $('.box').find('.msg').text(error.responseJSON.error);
        }
      })
    }

    
    // 提交检测
    $('.submit').click(function () {
      for(var i=0; i<codeArr.length; i++){
        $.ajax({
          type: "post",
          url: req_prefix + '/FeatureSe/addFeatureToFse',
          xhrFields: {
            withCredentials: true
          },
          crossDomain: true,
          contentType: "application/json",
          data: JSON.stringify({
            "feature": codeArr[i].code,
            "featureId": null,
            "imgMD5": null
          }),
          success: function (data) {
            if(data.success){
              $('.box').show().delay(3000).fadeOut();
              $('.box').find('.msg').text('添加成功');
            }else{
              $('.box').show().delay(3000).fadeOut();
              $('.box').find('.msg').text(data.errorMessage);
            }
          },
          error: function (error) {
            console.log(error)
            $('.box').show().delay(3000).fadeOut();
            $('.box').find('.msg').text(error.responseJSON.error);
          }
        })
      }
    })
  </script>
</body>

</html>